<template>
	<view class="detail-wrapper">

		<view class="bottom">
			<view class="btn">
				立即订购
			</view>
		</view>
		<!-- 轮播图 -->
		<view class="swiper">
			<image :src="list.cover" mode=""></image>
		</view>

		<!-- content -->
		<view class="box">
			<view class="top">
				<view class="zi1">{{list.title}}</view>
			</view>
			<view class="two">
				<view class="left">2 人学过</view>
				<view class="right">
					<u-icon name="star" color="black" size="20"></u-icon>
				</view>
			</view>
			<view class="three">
				￥{{list.price}}
				<span>￥{{list.t_price}} </span>
			</view>
		</view>

		<view class="hh"></view>

		<view class="p">
			课程简介
		</view>
		<view v-html="list.try" class="iiiii"></view>
	</view>
</template>

<script>
	import {
		detailList
	} from '../api/detail.js';
	export default {
		data() {
			return {
				list: [],
				gid: "",
			}
		},

		onLoad(e) {
			this.gid = e.id;
			console.log(e.id, "EEEEEEEEEEEEEEEEEEE")
			this.getlist()
		},
		methods: {
			//获取数据
			async getlist() {
				const res = await detailList(this.gid);
				console.log(res, "详情");
				this.list = res.data.data
			},
		}
	}
</script>

<style lang="scss">
	.detail-wrapper {
		width: 100%;
		height: 100%;

		.bottom {
			width: 100%;
			padding: 20px;
			box-sizing: border-box;
			height: 120rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			background-color: white;
			color: #fff;

			.btn {
				width: 100%;
				height: 100rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				color: #fff;
				font-size: 30rpx;
				border-radius: 5rpx;
				background-color: #5ccc84;
			}
		}


		.iiiii {
			width: 100%;
			font-size: 30rpx;

			::v-deep img {
				width: 100%;
				height: 100%;
			}
		}

		.swiper {
			width: 100%;
			height: 410rpx;


			image {
				width: 100%;
				height: 100%;
			}

		}

		.box {
			margin-top: 20rpx;
			height: 160rpx;
			background-color: white;
			display: flex;
			flex-direction: column;
			padding: 20rpx;
			box-sizing: border-box;
			justify-content: space-around;

			.top {
				font-size: 32rpx;
			}

			.two {
				display: flex;
				justify-content: space-between;
				align-items: center;
				font-size: 27rpx;
				color: #a9a5a0;
			}

			.three {
				color: red;
				font-size: 35rpx;

				span {
					font-size: 24rpx;
					color: grey;
				}
			}

		}

		.hh {
			height: 10px;
			background-color: #f5f5f3;
		}

		.p {
			padding: 20rpx;
			width: 100%;
			height: 70rpx;
			font-size: 35rpx;
			font-weight: 700;
			display: flex;
			justify-content: space-between;
			align-items: center;
			box-sizing: border-box;

		}

	}
</style>
